<template>
  <main>
    <div class="center">
      <div class="title">个人中心</div>
      <div class="base-form base_info">
        <div class="icon">
          <i class="iconfont ic-worker"></i>基本信息
          <div class="line"></div>
        </div>
        <el-form :rules="rules" :model="form" inline-message>
          <el-form-item label="用户名" prop="username">
            <el-input
              v-model="form.username"
              class="w-50 m-2"
              size="large"
              @focus="formFlag.userNameFlag = true"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input
              v-model="form.email"
              class="w-50 m-2"
              size="large"
              @focus="formFlag.pwdFlag = true"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="所在单位类型" prop="password">
            <el-select
              v-model="form.password"
              class="w-50 m-2"
              size="large"
              show-password
              type="password"
              @focus="formFlag.pwdFlag = true"
            >
            </el-select>
          </el-form-item>
          <el-form-item label="单位名称" prop="password">
            <el-input
              v-model="form.password"
              class="w-50 m-2"
              size="large"
              type="password"
              @focus="formFlag.pwdFlag = true"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="职位/身份" prop="password">
            <el-select
              v-model="form.password"
              class="w-50 m-2"
              size="large"
              @focus="formFlag.pwdFlag = true"
            >
            </el-select>
          </el-form-item>
          <el-form-item>
            <template #label>
              <div class="label"></div>
            </template>
            <div class="submit_btn">确定</div>
            <div class="cancel_btn">取消</div>
          </el-form-item>
        </el-form>
      </div>
      <div class="base-form change_password">
        <div class="icon">
          <i class="iconfont ic-lock"></i>修改密码
          <div class="line"></div>
        </div>
        <el-form :rules="rules" :model="form" inline-message>
          <el-form-item required label="原密码" prop="username">
            <el-input
              v-model="form.username"
              class="w-50 m-2"
              size="large"
              show-password
              type="password"
              @focus="formFlag.userNameFlag = true"
            >
            </el-input>
          </el-form-item>
          <el-form-item required label="新密码" prop="password">
            <el-input
              v-model="form.password"
              class="w-50 m-2"
              size="large"
              show-password
              type="password"
              placeholder="设置密码"
              @focus="formFlag.pwdFlag = true"
            >
            </el-input>
          </el-form-item>
          <div class="span">6-20字符,字母/数字/符号请至少包含2种</div>
          <el-form-item required label="确认密码" prop="password">
            <el-input
              v-model="form.password"
              class="w-50 m-2"
              size="large"
              type="password"
              placeholder="请再次输入密码"
              @focus="formFlag.pwdFlag = true"
            >
            </el-input>
          </el-form-item>
          <el-form-item>
            <template #label>
              <div class="label"></div>
            </template>
            <div class="submit_btn">确定</div>
            <div class="cancel_btn">取消</div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </main>
</template>

<script>
export default {
  data() {
    return {
      form: {
        email: "",
      },
      formFlag: {},
      rules: {
        email: [
          {
            required: false,
            pattern: /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/,
            message: "请输入正确的邮箱",
            trigger: "blur",
          },
        ],
        username: [
          {
            required: true,
            pattern: /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/,
            message: "原密码必填",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            pattern: /(?!^[0-9]+$)(?!^[A-z]+$)(?!^[^A-z0-9]+$)^.{6,20}$/,
            message: "新密码必填",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
main {
  width: 100%;
  height: 100%;
  background: rgba(247, 248, 250, 1);
  overflow: scroll;
  .center {
    width: 928px;
    height: 1046px;
    margin: 40px auto 80px auto;
    border-radius: 4px;
    background: rgba(255, 255, 255, 1);
    overflow: scroll;
    .title {
      color: rgba(29, 33, 41, 1);
      font-size: 24px;
      font-weight: 700;
      margin: 64px 0 48px 80px;
    }
    .base-form {
      margin: 0 0 40px 80px;
      .icon {
        color: map-get($bg-primary, "static");
        font-size: 16px;
        font-weight: 400;
        margin-bottom: 40px;
        @include flex-y-center;
        i {
          margin-right: 10px;
        }
        .line {
          width: 660px;
          height: 1px;
          border: 1px dashed #e5e6eb;
          margin: 0 0 0 16px;
        }
      }
      .el-form {
        .el-form-item {
          margin: 20px 0 5px 0;
        }
        :deep(.el-form-item__label) {
          width: 95px;
          font-size: 14px;
          font-weight: 400;
          padding: 0;
        }
        :deep(.el-form-item__content) {
          .el-input {
            width: 400px;
          }
          .el-input__inner {
            width: 400px;
            margin-left: 16px;
            background-color: map-get($fill-color, common);
            border: 0;
          }
          .el-select {
            width: 200px;
            .el-input {
              width: 200px;
            }
            .el-input__inner {
              width: 200px;
              padding-right: 0;
              border: 0;
            }
          }
        }
        .label {
          width: 84px;
        }
        .span {
          color: map-get($font-sizes, "smText");
          font-size: 12px;
          font-weight: 400;
          margin-left: 110px;
        }
        .submit_btn {
          width: 60px;
          height: 32px;
          border-radius: 2px;
          background: map-get($bg-primary, "static");
          @include flex-y-center;
          justify-content: center;
          color: white;
          margin: 0 8px 0 16px;
          cursor: pointer;
        }
        .cancel_btn {
          width: 60px;
          height: 32px;
          border-radius: 2px;
          background: map-get($fill-color, common);
          @include flex-y-center;
          justify-content: center;
          color: map-get($font-sizes, "title");
          cursor: pointer;
        }
      }
    }
  }
}
</style>
